<template>
  <div class="comments-box page">
    <van-nav-bar title="评价" class="bg_white" left-arrow @click-left="goBack" />
    <div class="comments-tab" ref="webview">
      <template v-for="(item,index) in commentsTab">
        <div class="tab" :key="index" :class="{active: commentsTabIndex === item.state}">
          <span class="name" ref="commentsTab" @click="commentsTabchange(item.state)">{{item.name}}</span>
        </div>
      </template>
      <span class="activeLine" v-if="commentsTabLeft" :style="'left:'+commentsTabLeft+'px;'+'width:'+commentsTabWidth+'px;'"></span>
    </div>
    <div class="content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-empty description="暂无数据" image="/static/img/empty-image-default.png" v-if="dataList.length===0" />
        <van-list v-model="loading" :finished="finished" :finished-text="dataList.length>4?'没有更多了':''" @load="onLoad" :offset="50" :immediate-check="false">
          <div class="product-box" v-for="(item, index) in dataList" :key="index" @click="goDetail(item)">
            <!-- <div class="comments-stroe">
              <span class="name">剑龙官方旗舰店</span>
            </div> -->
            <div class="product-info">
              <div class="imgPath">
                <van-image :width="$tools.toPX(120)" :height="$tools.toPX(120)" fit="contain" class="img" lazy-load :src="item.goods_img">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="24" />
                  </template>
                </van-image>
              </div>
              <div class="comments" :class="{column:item.goods_score}">
                <div class="name van-multi-ellipsis--l2">{{item.goods_name}}</div>
                <div class="slot" v-if="!item.goods_score">
                  <p class="m-price">{{item.goods_price}}</p>
                  <p class="num">共{{item.goods_num}}件</p>
                </div>
                <template v-if="item.goods_score">
                  <div class="goods-score">
                    <span class="goods-score-name">评分</span>
                    <van-rate v-model="item.goods_score" icon="rate-yellow" void-icon="rate-gray" readonly />
                  </div>
                </template>
              </div>
            </div>
            <template v-if="item.goods_score">
              <div class="readonly">{{item.content}}</div>
            </template>
            <div class="comments-btn" v-if="!item.is_append || item.is_append == 0">
              <span class="btn" @click.stop="goComment(item)">{{commentsTabIndex === 1?'评价':'追评'}}</span>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import mixins from '@/utils/mixins';
export default {
  name: 'commentsList',
  data () {
    return {
      commentsTabIndex: parseInt(localStorage.getItem('commentsTabIndex')) || 1,
      commentsTabLeft: 0,
      commentsTabWidth: 0,
      commentsTab: [
        {
          state: 1,
          name: '待评价'
        },
        {
          state: 2,
          name: '已评价/追评'
        }
      ],
      apiUrl: '',
      apiType: 'comments'
    };
  },
  mixins: [mixins],
  created () { },
  mounted () {
    this.$nextTick(() => {
      this.commentsTabchange(this.commentsTabIndex);
    });
  },
  destroyed () {
    // localStorage.removeItem('commentsTabIndex');
  },
  methods: {
    goBack () {
      this.$router.go(-1);
      localStorage.removeItem('commentsTabIndex');
    },
    commentsTabchange (state) {
      this.commentsTabIndex = state;
      this.commentsTabWidth = this.$refs.commentsTab[state - 1].offsetWidth;
      this.commentsTabLeft = this.$refs.commentsTab[state - 1].offsetLeft;
      if (state === 1) {
        this.apiUrl = 'waitComments';
        this.getList('waitComments', true);
      } else if (state === 2) {
        this.apiUrl = 'hasComments';
        this.getList('hasComments', true);
      }
      localStorage.setItem('commentsTabIndex', state);
    },
    goComment (item) {
      let query = {
        id: item.id
      };
      if (item.appraise_id) {
        query.appraiseId = item.appraise_id;
      }
      this.$router.push({ path: '/comments/from', query: query });
    },
    goDetail (item) {
      // 如果是待评价列表则不做操作
      if (!item.appraise_id) return;
      this.$router.push({ path: '/comments/details', query: { id: item.appraise_id } });
    }
  }
};
</script>
<style lang="less" scoped>
.comments-box {
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow: auto;
    .product-box {
      margin-top: 20px;
    }
    .readonly {
      font-size: 24px;
      color: #666;
    }
  }
  .comments-tab {
    display: flex;
    padding: 0 100px;
    line-height: 78px;
    position: relative;
    background-color: #fff;
    .tab {
      display: block;
      flex: 1;
      text-align: center;
      .name {
        font-size: 28px;
        color: #666;
      }
    }
    .tab.active {
      .name {
        color: #ff0034;
        font-weight: 800;
      }
    }
    .activeLine {
      position: absolute;
      display: block;
      bottom: 0px;
      height: 4px;
      border-radius: 4px;
      transition: left ease 0.3s;
      background-color: #ff0034;
    }
  }
}
</style>
